Галерея экранов
Полный реестр интерфейса: рабочее состояние каждого экрана плюс осмысленные для него состояния — пусто, загрузка, ошибка, успех. Экраны — это живые кадры из прототипа (не его копии), поэтому галерея и прототип всегда совпадают. Сам прототип остаётся отдельно во вкладке «Макет». Нажмите на любой экран — откроется его спецификация вёрстки: экран целиком плюс поэлементный гайд по сборке.
Каждый экран получает собственный скелетон — он живёт в паре справа от живого экрана. Скелетоны собраны на все 14 рабочих экранов: плейсхолдеры точно повторяют контент по формам, токенам и радиусам системы; статус-бар реальный, нижней навигации нет. План →
Переход · демонстрация
Скелетон держит каркас одним нейтральным тоном, пока грузится контент, затем плавно сменяется готовым экраном. Цикл повторяется автоматически — это и есть смысл скелетона.
Экраны, чьи скелетоны соберу на следующем шаге. Пока — живые кадры из прототипа; нажмите на любой, откроется спецификация вёрстки.
{{ sc.title }}
{{ sc.sub }}
Спецификация вёрстки →
Состояния, осмысленные для конкретных экранов: первый запуск, пустая витрина, загрузка, обрыв связи, момент успеха.
Сплеш → загрузка
N4 · мостик от заставки к витрине
Пустая витрина
N3 · первый заход без поездок
Загрузка · скелетон
E4 · витрина подгружается
Готово на 100%
N2 · поездка собрана, момент успеха
Состояние E4 в едином пространственном языке — точки, тонкие тросики, звёздный фон. «Натяжение» — главный, два других держим как утверждённые альтернативы.
Орбита
4A · сеть кружит и гаснет на отдалении
Натяжение
Главный4B · E4 · трос натянут, сигнал не дотягивает
Созвездие
4C · одна точка погасла и дрейфует
E6 · паритет платформ
Контент и иерархия одинаковы. Меняется только системный чром: статус-бар, навигация и материал. Так Джарни одинаково чувствует себя на обеих платформах.
iOS
Android
Статус-бар
iOS — вырез по центру, высота 44pt. Android — punch-hole, иконки сети плотнее, высота 24–34dp.
Навигация
iOS — полупрозрачный таб-бар + home-индикатор. Android — Material nav с активной «пилюлей» и системным жестом снизу.
Действие и радиусы
На Android главное действие — FAB. Скругления чуть меньше (16 vs 22), заголовки на полтона легче по весу.
Неизменно: палитра, типографика, голос Джарни, иерархия и контент. Меняется только системная обёртка.
Правила состояний
Пусто
Маскот + тёплое приглашение + один явный шаг. Никогда не «нет данных».
Загрузка
Скелетон повторяет будущую раскладку. Шиммер 1.4s. Спиннер только для действий.
Ошибка
Спокойно, без вины. Что случилось + «Повторить» + офлайн-выход.
Успех
Празднуем коротко: happy-маскот + pop, следующий шаг и мягкий апселл.
Спецификация вёрстки
Полная спецификация этого экрана ещё готовится. Слева — живой экран в полном размере. Эталонный разобранный экран — «Витрина поездок».
Слева — живой экран в натуральную ширину с нумерованной разметкой; справа — поэлементная спецификация (тип, цвет-токен, отступы, радиус, тень, компонент, поведение, a11y) и код Compose Multiplatform. Ключевые состояния (пусто / загрузка / ошибка) пока без спеки — дорабатываются.
Показано: {{ filterInfo }}
Этот экран показан целиком слева. Поэлементная спецификация появится после тиража формата с пилота.
Пины ①—⑥ закреплены на вёрстке слева и ведут к разделам ниже. Экран показан целиком, в натуральную мобильную ширину (360pt), без рамки устройства. Янтарные чипы — замечания: отклонения от дизайн-системы.
Токены этого экрана · из дизайн-системы
Открыть в Дизайн-системе →Типографика
Цвет
Отступы · радиусы
Ничего не найдено по этому фильтру. Сбросьте поиск или переключитесь на «Всё».
Значения — токены дизайн-системы (имя + факт). Клик по любому чипу копирует значение. Бейджи компонентов ведут в их DC, токены — в Дизайн-систему. Поиск, фильтр «Замечания», тумблер разметки, печать и «Копировать спеку» — в панели сверху.